<template>
  <div id="app">
    {{ state.msg }}

    <button @click="changeMsg">changeMsg</button>
  </div>
</template>
<script>
// reactive 用于定义对象和数组
import { reactive } from 'vue'
export default {
  // data() {
  //   return {
  //     msg: 'hello vue3'
  //   }
  // },
  // methods: {
  //   changeMsg() {
  //     this.msg = '更新了'
  //   }
  // }
  // created() {
  //   console.log(this.msg)
  //   console.log(1)
  // },
  // setup 中无法获取this
  // setup 的执行时机比created 快速
  setup() {
    // console.log(this.msg)
    // console.log(2)
    const state = reactive({
      msg: 'hello vue3'
    })
    const changeMsg = () => {
      state.msg = '更新了'
    }
    return {
      state,
      changeMsg
    }
  }
}
</script>
<style lang="scss" scoped></style>
